﻿@page "/chart/axis-crossing"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the interpolation of data points between linear and cubic by the use of a spline and a line series.</p>
</SampleDescription>
<ActionDescription>
    <p>This sample demonstrates the axis crossing behavior in the chart. The axis can be positioned anywhere in the chart area by using the <code>CrossesAt</code> property of the axis. This property specifies where the horizontal axis should intersect or cross the vertical axis and vice-versa.</p>
    <p>The default value for the <code>CrossesAt</code> property is <code>null</code>. You can use the <code>PlaceNextToAxisLine</code> property to place the axis labels and ticks next to the axis line. If there are multiple axes, the cross axis can be selected using the <code>CrossesInAxis</code> property. If the name of the axis is not valid, the <code>PrimaryXAxis</code> or <code>PrimaryYAxis</code> will be used to cross the axis by default.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the axis crossing can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/axis-customization/#axis-crossing'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfChart Title="Spline Interpolation" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Minimum="-8" Maximum="8" Interval="2" CrossesAt="@XCrossesAt" MinorTicksPerInterval="3" PlaceNextToAxisLine="@PlaceX">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="-8" Maximum="8" Interval="2" CrossesAt="@YCrossesAt" MinorTicksPerInterval="3" PlaceNextToAxisLine="@PlaceY">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@LinePoints" Name="Line Interpolation" XName="XValue" Width="2"
                         Opacity="1" YName="YValue" Type="ChartSeriesType.Line" Fill="Blue">
            </ChartSeries>
            <ChartSeries DataSource="@SplinePoints" Name="Cubic Spline Interpolation" XName="XValue" Width="2"
                         Opacity="1" YName="YValue" Type="ChartSeriesType.Spline" Fill="Green">
            </ChartSeries>
            <ChartSeries DataSource="@ScatterPoints" Name="Data points" XName="XValue" Width="2"
                         Opacity="1" YName="YValue" Type="ChartSeriesType.Scatter" Fill="Red">
                <ChartMarker Visible="true" Width="12" Height="12">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr style="height:50px">
                    <td style="font-size:14px">
                        Axis:
                    </td>
                    <td>
                        <SfDropDownList TValue="string" Placeholder="X" TItem="DropDownData" DataSource="@AxisTypes">
                            <DropDownListFieldSettings Value="ID"></DropDownListFieldSettings>
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeAxis"></DropDownListEvents>
                        </SfDropDownList>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 60%">
                        <div>Crosses Value:</div>
                    </td>
                    <td style="width: 40%;">
                        <div style='margin-top: 0px;'>
                            <SfNumericTextBox TValue="int?" Value="@CrossValue" Max=8 Min=-8 Step=2>
                                <NumericTextBoxEvents TValue="int?" ValueChange="ChangeCrossValue" />
                            </SfNumericTextBox>

                        </div>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>Placing Label Near to Axis Line: </div>
                    </td>
                    <td style="width: 50%;">
                        <div>
                            <SfCheckBox TChecked="bool" Checked="@IsChecked" ValueChange="@CheckValue"></SfCheckBox>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private string axis = "X";
    private bool PlaceX = true, PlaceY = true, IsChecked = true;
    private int CrossValue = 0, XCrossesAt = 0, YCrossesAt = 0;
    private Theme Theme { get; set; }
    public List<DropDownData> AxisTypes { get; set; } = new List<DropDownData>
    {
        new DropDownData(){ ID= "X"},
        new DropDownData(){ ID= "Y"}
    };
    public List<AxisData> ScatterPoints { get; set; } = new List<AxisData>
    {
        new AxisData { XValue = -6, YValue = 2},
        new AxisData { XValue = -3, YValue = -4 },
        new AxisData { XValue = 1.5, YValue = 3.5 },
        new AxisData { XValue = 6, YValue = 4.5}
    };
    public List<AxisData> SplinePoints { get; set; } = new List<AxisData>
    {
        new AxisData { XValue = -6, YValue = 2},
        new AxisData { XValue = -5.291, YValue = 0 },
        new AxisData { XValue = -5, YValue = -0.774},
        new AxisData { XValue = -3, YValue = -4},
        new AxisData { XValue = -0.6, YValue = -0.965},
        new AxisData { XValue = -0.175, YValue = 0.1},
        new AxisData { XValue = 0, YValue = 0.404},
        new AxisData { XValue = 1.5, YValue = 3.5},
        new AxisData { XValue = 3.863, YValue = 5.163},
        new AxisData { XValue = 6, YValue = 4.5}
    };
    public List<AxisData> LinePoints { get; set; } = new List<AxisData>
    {
        new AxisData { XValue = -6, YValue = 2},
        new AxisData { XValue = -5, YValue = 0 },
        new AxisData { XValue = -4.511, YValue = -0.977},
        new AxisData { XValue = -3, YValue = -4},
        new AxisData { XValue = -1.348, YValue = -1.247},
        new AxisData { XValue = -0.6, YValue = 0},
        new AxisData { XValue = 0, YValue = 1},
        new AxisData { XValue = 1.5, YValue = 3.5},
        new AxisData { XValue = 6, YValue = 4.5}
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public void CheckValue(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        IsChecked = args.Checked;
        if (axis == "X")
        {
            PlaceX = args.Checked;
        }
        else
        {
            PlaceY = args.Checked;
        }
    }

    public void ChangeAxis(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        axis = Convert.ToString(args.Value);
        if (axis == "X")
        {
            IsChecked = PlaceX;
            CrossValue = XCrossesAt;
        }
        else
        {
            IsChecked = PlaceY;
            CrossValue = YCrossesAt;
        }
    }

    public void ChangeCrossValue(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
    {
        CrossValue = Convert.ToInt32(args.Value);
        if (axis == "X")
        {
            XCrossesAt = CrossValue;
        }
        else
        {
            YCrossesAt = CrossValue;
        }
    }

    public class DropDownData
    {
        public string ID { get; set; }
    }

    public class AxisData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }

}
